<template>
  <div class="setting-content inside-comment">
    <div class="setting-item"  v-if="commentSetting">
      <h2 class="setting-header">
        <strong>留言设置</strong>
      </h2>
      <el-form class="setting-form" :model="commentSetting" label-width="110px"  size="large">
        
        <el-form-item label="禁言">
          <div class="item-row">
            <span>标记次数</span>
            <el-input-number v-model="commentSetting.muteLimit" :min="1" :max="10" size="default" controls-position="right"/>
            <el-popover
              placement="top-start"
              :width="220"
              trigger="hover"
              content="当用户违规发言被标记次数超过限制时，将自动禁言，禁言时间如下设置；若用户被标记次数超过限制，将拉黑该用户，该用户不能登录系统"
            >
              <template #reference>
                <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
          <div class="item-row">
            <span>禁言时间</span>
            <el-input-number v-model="commentSetting.muteDuration" :min="1" :max="10" size="default" controls-position="right"/>
            <span>（天）</span>
          </div>
        </el-form-item>
        <el-form-item label="拉黑">
          <div class="item-row">
            <span>标记次数</span>
            <el-input-number v-model="commentSetting.blockLimit" :min="1" :max="10" size="default" controls-position="right"/>
          </div>
        </el-form-item>
        
        <el-form-item label="每天最多留言">
          <el-input-number v-model="commentSetting.ipLimit" :min="1"  size="default" controls-position="right"/>
          <span>（条）</span>
        </el-form-item>
        <el-form-item label="内网限制">
          <el-switch v-model="commentSetting.intranet" />
          <el-popover
            placement="top-start"
            :width="200"
            trigger="hover"
            content="是否部分留言只能在内网访问"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="同步发送邮箱">
          <el-switch v-model="commentSetting.email" />
          <el-popover
            placement="top-start"
            :width="200"
            trigger="hover"
            content="开启后若用户信息中包含邮箱，回复将同步发送到用户改邮箱内"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="内网ip地址" v-if="commentSetting.intranet">
          <el-input type="text" v-model="commentSetting.ip"  size="large" placeholder="请输入ip" />
        </el-form-item>
        <el-form-item label="登录留言或评论">
          <el-switch v-model="commentSetting.needLogin" />
          <el-popover
            placement="top-start"
            :width="200"
            trigger="hover"
            content="用户登录后才能进行留言或者评论"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="匿名留言" v-if="commentSetting.needLogin">
          <el-switch v-model="commentSetting.allowAnonymousQuestion" />
          <el-popover
            placement="top-start"
            :width="200"
            trigger="hover"
            content="留言人名称在前台将显示匿名"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="用户评论">
          <el-switch v-model="commentSetting.allowRemark" />
          <el-popover
            placement="top-start"
            :width="220"
            trigger="hover"
            content="是否允许用户评论留言"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="每分钟最多评论" v-if="commentSetting.allowRemark">
          <el-input-number v-model="commentSetting.remarkLimit" :min="1" :max="10" size="default" controls-position="right"/>
          <span>（条）</span>
        </el-form-item>
        <el-form-item label="用户互相回复" v-if="commentSetting.allowRemark">
          <el-switch v-model="commentSetting.allowUsersRemark" />
        </el-form-item>
        <!-- <el-form-item label="评论限制层级" v-if="commentSetting.allowRemark">
          <el-input-number v-model="commentSetting.remarkLevelLimit" :min="1" :max="10" size="default" controls-position="right"/>
        </el-form-item> -->
        <el-form-item label="评论输入提示" v-if="commentSetting.allowRemark">
          <el-input type="text" v-model="commentSetting.remarksPrompt"  size="large" placeholder="请输入用户提示内容，引导用户发言" maxlength="50"/>
        </el-form-item>
        <div class="fotter">
          <el-button type="primary" @click="commentSettingSubmit" size="default">保存</el-button>
        </div>
      </el-form>

    </div>
    <div class="setting-item" v-if="system">
      <h2 class="setting-header">
        <strong>基本设置</strong>
      </h2>
      <el-form class="setting-form"  :model="system" label-width="100px"  size="large">
        <el-form-item label="系统名称" prop="systemName">
          <el-input placeholder="输入系统名称" v-model="system.systemName"></el-input>
        </el-form-item>
        <el-form-item label="官网地址" prop="officialWebsiteUrl">
          <el-input placeholder="输入官网地址" v-model="system.officialWebsiteUrl"></el-input>
        </el-form-item>
        <el-form-item label="LOGO1" prop="logoUrl1" style="display: none;">
          <div class="thumb-box">
            <el-upload action="#" list-type="picture-card" :file-list="thumbList" :on-preview="handlePreviewThumb"
              :on-exceed="handleExceed" :http-request="handleUpload" accept=".jpg,.png" :limit="1"
              style="margin-top: 10px">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="版权信息" prop="copyrightInfo">
          <el-input placeholder="输入版权信息" v-model="system.copyrightInfo"></el-input>
        </el-form-item>
        <el-form-item label="ICP备案" prop="icpRecordNumber">
          <el-input placeholder="输入ICP备案" v-model="system.icpRecordNumber"></el-input>
          <el-input placeholder="输入链接" v-model="system.icpRecordUrl"></el-input>
        </el-form-item>
        <el-form-item label="公网安备" prop="beianRecordNumber">
          <el-input placeholder="输入公网安备" v-model="system.beianRecordNumber"></el-input>
          <el-input placeholder="输入链接" v-model="system.beianRecordUrl"></el-input>
        </el-form-item>
        <div class="fotter">
          <el-button type="primary" @click="FormSubmit" size="default">保存</el-button>
        </div>
      </el-form>
      <ImageUpload v-if="showUpload" v-model:showDialog="showUpload" :isAppendToBody="true" :limit="1" @getImage="getImage"></ImageUpload>
    </div>
    
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { 
  selectsystem, 
  updatesystem, 
  selectfunction,
  updateFunction
 } from '@/api/setting'
import { QuestionFilled } from '@element-plus/icons-vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import ImageUpload from "./components/ImageUpload";

//获取基本设置信息
const system = ref()
const getInfo = async () => {
  const res = await selectsystem()
  system.value = res.data[0]
}
getInfo()

//保存基本设置信息
const FormSubmit = async () => {
  try {
    const res = await updatesystem(system.value);
    if (res.code === 20000) {
      ElMessage.success("更新成功");
    }
    getInfo()
  } catch (error) {
    ElMessage.warning("更新失败");
  }
}
//获取留言设置
const commentSetting = ref()
const getCommentSetting = async () => {
  const res = await selectfunction()
  commentSetting.value = res.data 
  console.log("commentSetting.value",commentSetting.value);
}

getCommentSetting()

//保存留言设置
const commentSettingSubmit = async () => {
  try {
    const res = await updateFunction(commentSetting.value)
    if (res.code == 20000) {
      ElMessage.success("更新成功");
    }
    getCommentSetting()
  } catch (error) {
    ElMessage.warning("更新失败");
  }
}

const showUpload = ref(false)
// 上传数量超出
const handleExceed = () => {
  ElMessage.warning('只能上传一张图片')
}
//LOGO上传
const thumbList = ref([])
// 预览缩略图
const thumbDialog = ref(false)
const handlePreviewThumb = () => {
  thumbDialog.value = true
}
const getImage = (images) => {
  system.value.logoUrl1 = images[0].url
}

// 监听表单数据的缩略图
watch(
  () => system.value,
  newVal => {
    if (newVal) {
      thumbList.value = [{ name: '', url: newVal.logoUrl1 }]
    } else {
      thumbList.value = []
    }
  },
  { deep: true }
)

</script>

<style lang="scss" scoped>
  .setting-content{
    display: flex;
  }
  .setting-item{
    padding: 20px;
    margin-right: 20px;
    box-shadow: var(--card-hover-shadow, 1px 1px 4px 0 rgba(0, 0, 0, .13));
    height: max-content;
  }
  .setting-form{
    width: 500px;
    max-width: 98%;
    ::v-deep *{
      font-size: 14px;

    }
    ::v-deep svg{
      font-size: 16px;

    }
    .item-row{
      span{
        margin-right: 10px;
        color: $black_2;
        font-size: 14px;
      }
    
    }
  }
 
  ::v-deep .el-input+.el-input{
    margin-top: 10px;
  }
  .fotter{
    display: flex;
    justify-content: end;
  }
</style>